<template xmlns="http://www.w3.org/1999/html">
  <div class="box">
    <div class="box-header no-padding-bottom no-border">
      <div>
        <sea-table-title title="客户星级配置" subtitle="星级配置主要用于分析客户质量"></sea-table-title>
        <strong>最大星级：</strong>
        <el-rate :value="5"></el-rate>
        <sea-tips>
          <h6>星级配置规则</h6>
          <p>1、每一个指标，包含若干个条件，如果满足全部条件，则获取一定的积分；</p>
          <p>2、积分按照比例，换算成星级；</p>
          <p>3、各个指标星级，总和最大不超过5。</p>
        </sea-tips>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="box-body">
      <el-collapse accordion v-model="activeName" style="margin-bottom: 260px">
        <star-panel v-for="item in stars" :key="item.id" :item="item"></star-panel>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import StarPanel from "./panel.vue";

/**
 * 任务创建列表
 */
const maxTotal = ref(0);

const activeName = ref('');

const stars = reactive([
    {id: '0001', name: '指标一', score: 10, max: 1}
    , {id: '0002', name: '指标二', score: 10, max: 3}
    , {id: '0003', name: '指标三', score: 10, max: 2}
])
</script>
